<template>
  <div class="anti-fraud-module">
    <!-- 横向滚动区域 -->
    <div class="horizontal-scroll-container">
      <div class="card-scroll-wrapper">
        <div
          v-for="(item, index) in fraudData"
          :key="index"
          class="fraud-card"
          @click="showDetail(item)"
        >
          <!-- 卡片装饰元素 -->
          <div class="card-decoration">
            <div class="accent-line"></div>
            <div class="hover-overlay"></div>
          </div>

          <!-- 卡片主体内容 -->
          <div class="card-content">
            <div class="card-header">
              <div class="icon-container">
                <el-icon class="card-icon"><component :is="item.icon" /></el-icon>
              </div>
              <div class="title-wrapper">
                <h3 class="card-title">{{ item.title }}</h3>
                <div class="card-subtitle">{{ item.subtitle }}</div>
              </div>
            </div>

            <div class="card-body">
              <p class="card-summary">{{ item.summary }}</p>
              <div class="card-footer">
                <div class="tag-container">
                  <el-tag
                    v-for="tag in item.tags"
                    :key="tag"
                    class="fraud-tag"
                    :type="getTagType(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
                <div class="meta-info">
                  <div class="left-info">
                    <el-icon class="meta-icon"><Clock /></el-icon>
                    <span class="update-time">{{ item.updateTime }}</span>
                  </div>
                  <span :style="{ color: getRiskColor(item.riskLevel) }" class="risk-text">
                    {{ getRiskLevelText(item.riskLevel) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      :title="currentDetail.title"
      width="840px"
      custom-class="fraud-detail-dialog"
    >
      <div class="dialog-content-wrapper">
        <!-- 基本信息区 -->
        <div class="detail-section base-info">
          <div class="section-header">
            <el-icon class="section-icon"><InfoFilled /></el-icon>
            <h4 class="section-title">基本信息</h4>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">风险等级：</span>
              <div class="info-value">
                <el-rate
                  :model-value="currentDetail.riskLevel"
                  disabled
                  :colors="['#9b2a2a']"
                  :max="5"
                />
                <span class="risk-text">{{ riskLevelText }}</span>
              </div>
            </div>
            <div class="info-item">
              <span class="info-label">最后更新：</span>
              <div class="info-value">{{ currentDetail.updateTime }}</div>
            </div>
          </div>
        </div>

        <!-- 核心内容区 -->
        <div class="detail-section main-content">
          <div class="section-header">
            <el-icon class="section-icon"><Document /></el-icon>
            <h4 class="section-title">核心内容</h4>
          </div>
          <pre class="content-text">{{ currentDetail.content }}</pre>
        </div>

        <!-- 典型案例区 -->
        <div class="detail-section case-study" v-if="currentDetail.cases">
          <div class="section-header">
            <el-icon class="section-icon"><Warning /></el-icon>
            <h4 class="section-title">典型案例</h4>
          </div>
          <el-collapse
            v-model="activeCase"
            accordion
            class="case-collapse"
          >
            <el-collapse-item
              v-for="(c, index) in currentDetail.cases"
              :key="index"
              :title="`案例 ${index + 1}: ${c.title}`"
              :name="index"
            >
              <div class="case-details">
                <div class="case-meta">
                  <div class="meta-item">
                    <el-icon><Calendar /></el-icon>
                    <span>{{ c.time }}</span>
                  </div>
                  <div class="meta-item">
                    <el-icon><Location /></el-icon>
                    <span>{{ c.location }}</span>
                  </div>
                </div>
                <div class="case-description">
                  {{ c.description }}
                </div>
                <div class="case-suggestion">
                  <el-icon class="suggestion-icon"><MagicStick /></el-icon>
                  <div class="suggestion-content">
                    <h5>防范建议：</h5>
                    <p>{{ c.suggestion }}</p>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, markRaw } from 'vue'
import {
  InfoFilled,
  Document,
  Warning,
  Clock,
  MagicStick,
  Calendar,
  Location,
  User,
  Phone
} from '@element-plus/icons-vue'

// 类型定义
interface FraudItem {
  title: string
  subtitle: string
  icon: any
  summary: string
  content: string
  tags: string[]
  riskLevel: number
  updateTime: string
  cases?: Array<{
    title: string
    time: string
    location: string
    description: string
    suggestion: string
  }>
}

// 响应式数据
const fraudData = ref<FraudItem[]>([
  {
    title: '失踪人口防范',
    subtitle: '识别失踪人口特征',
    icon: markRaw(User),
    summary: '了解失踪人口的常见特征，提升安全防范意识',
    content: `主要特征分析：
1. 突然失联：与家人或朋友失去联系，无法找到。
2. 行为异常：失踪前有异常行为或情绪波动。
3. 可能的诱因：涉及家庭纠纷、经济问题或心理健康问题。
4. 社交媒体活动：失踪前在社交媒体上有异常活动。

防范策略：
✓ 定期与家人朋友保持联系，确保彼此了解动态。
✓ 关注身边人的情绪变化，及时提供帮助。
✓ 学习如何使用社交媒体保护个人隐私。
✓ 了解失踪人口的求助渠道和报警流程。`,
    tags: ['失踪人口', '安全防范', '心理健康'],
    riskLevel: 5,
    updateTime: '2023-09-25 更新',
    cases: [
      {
        title: '某城市失踪人口案件',
        time: '2023-08-12',
        location: '北京市',
        description: '某市多名年轻人失踪，警方正在调查失踪原因，呼吁公众提供线索。',
        suggestion: '如发现可疑情况，请及时报警，保护自己和他人的安全。'
      }
    ]
  },
  {
    title: '防拐骗宣传',
    subtitle: '识别拐骗手段',
    icon: markRaw(Warning),
    summary: '了解常见的拐骗手段，提升自我保护意识',
    content: `常见拐骗手段：
1. 假冒身份：冒充警察、社工等，要求提供个人信息。
2. 诱骗接送：以送礼物、提供帮助为名，诱导儿童或青少年跟随。
3. 虚假求助：以紧急情况为借口，要求借钱或搭车。

防范策略：
✓ 不轻信陌生人的话，保持警惕。
✓ 教育孩子不随便跟随陌生人，遇到可疑情况及时报警。
✓ 学会识别常见的拐骗手段，增强自我保护意识。`,
    tags: ['防拐骗', '安全教育', '儿童保护'],
    riskLevel: 4,
    updateTime: '2023-09-26 更新',
    cases: [
      {
        title: '某地儿童拐骗案件',
        time: '2023-09-15',
        location: '广州市',
        description: '警方接到多起儿童被陌生人诱骗的报告，呼吁家长加强对孩子的安全教育。',
        suggestion: '家长应定期与孩子沟通，了解他们的日常活动和交友情况。'
      }
    ]
  },
  {
    title: '网络诈骗防范',
    subtitle: '识别网络诈骗特征',
    icon: markRaw(Document),
    summary: '了解网络诈骗的常见特征，提升网络安全意识',
    content: `常见网络诈骗手段：
1. 虚假购物网站：以低价吸引消费者，骗取钱财。
2. 钓鱼邮件：伪装成合法机构，诱导用户提供个人信息。
3. 社交工程：通过社交媒体获取信任，实施诈骗。

防范策略：
✓ 不随意点击不明链接，保持警惕。
✓ 使用安全的支付方式，避免在不明网站购物。
✓ 定期更新密码，保护个人信息安全。`,
    tags: ['网络诈骗', '安全防范', '信息保护'],
    riskLevel: 5,
    updateTime: '2023-09-27 更新',
    cases: [
      {
        title: '某网购诈骗案件',
        time: '2023-09-20',
        location: '深圳市',
        description: '多名消费者在虚假购物网站上被骗，警方已介入调查。',
        suggestion: '在网购时务必确认网站的合法性，避免上当受骗。'
      }
    ]
  },
  {
    title: '电话诈骗防范',
    subtitle: '识别电话诈骗特征',
    icon: markRaw(Phone),
    summary: '了解电话诈骗的常见特征，提升防范意识',
    content: `常见电话诈骗手段：
1. 假冒客服：冒充银行、快递等客服，要求提供个人信息。
2. 虚假中奖：以中奖为名，要求支付手续费或税费。
3. 恐吓诈骗：以法律威胁为手段，迫使受害者转账。

防范策略：
✓ 不轻信陌生来电，保持警惕。
✓ 不随意提供个人信息，尤其是银行卡信息。
✓ 遇到可疑电话，及时挂断并报警。`,
    tags: ['电话诈骗', '安全防范', '信息保护'],
    riskLevel: 4,
    updateTime: '2023-09-28 更新',
    cases: [
      {
        title: '某地电话诈骗案件',
        time: '2023-09-22',
        location: '南京市',
        description: '警方接到多起电话诈骗举报，提醒市民提高警惕。',
        suggestion: '如接到可疑电话，请及时报警，保护自己和他人的安全。'
      }
    ]
  }
])

const detailVisible = ref(false)
const activeCase = ref(0)
const currentDetail = ref<FraudItem>({} as FraudItem)

// 计算属性
const riskLevelText = computed(() => {
  const levels = ['低风险', '一般风险', '中等风险', '较高风险', '极高风险']
  return levels[currentDetail.value.riskLevel - 1] || '风险等级未知'
})

// 方法定义
const showDetail = (item: FraudItem) => {
  currentDetail.value = item
  detailVisible.value = true
}

const getTagType = (tag: string) => {
  const typeMap: Record<string, 'danger' | 'warning' | 'success'> = {
    '失踪人口': 'danger',
    '安全防范': 'warning',
    '心理健康': 'success',
    '防拐骗': 'warning',
    '网络诈骗': 'danger',
    '电话诈骗': 'danger',
    '儿童保护': 'success',
    '安全教育': 'warning',
    '信息保护': 'success'
  }
  return typeMap[tag] || 'info'
}

const getRiskColor = (level: number) => {
  const colors = ['green', 'orange', 'yellow', 'red', 'darkred']
  return colors[level - 1] || 'black'
}

const getRiskLevelText = (level: number) => {
  const levels = ['低风险', '一般风险', '中等风险', '较高风险', '极高风险']
  return levels[level - 1] || '风险等级未知'
}
</script>

<style scoped>
.anti-fraud-module {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.horizontal-scroll-container {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 42, 42, 0.3) transparent;
  padding: 10px 0;
  height: 100%;
}

.card-scroll-wrapper {
  display: flex;
  gap: 20px;
  padding: 0 20px;
  height: 100%;
  align-items: stretch;
}

.fraud-card {
  min-width: 400px;
  width: 400px;
  height: 100%;
  border-radius: 16px;
  padding: 28px;
  border: 1px solid rgba(155, 42, 42, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}

.fraud-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(155, 42, 42, 0.1);
}

.card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #9b2a2a 0%, #c0392b 100%);
  opacity: 0.3;
  transition: opacity 0.3s ease;
  border-radius: 16px 16px 0 0;
}

.fraud-card:hover .card-decoration {
  opacity: 0.8;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.icon-container {
  width: 64px;
  height: 64px;
  background: rgba(155, 42, 42, 0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.card-icon {
  font-size: 32px;
  color: #9b2a2a;
}

.title-wrapper {
  flex: 1;
}

.card-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.card-subtitle {
  font-size: 15px;
  color: #9b2a2a;
  opacity: 0.8;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-summary {
  flex: 1;
  font-size: 15px;
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.card-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tag-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fraud-tag {
  height: 26px;
  padding: 0 12px;
  font-size: 13px;
  border: none;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

@media screen and (max-width: 1600px) {
  .fraud-card {
    min-width: 360px;
    width: 360px;
    padding: 24px;
  }

  .card-header {
    margin-bottom: 20px;
  }

  .icon-container {
    width: 56px;
    height: 56px;
    margin-right: 16px;
  }

  .card-icon {
    font-size: 28px;
  }

  .card-title {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .card-subtitle {
    font-size: 14px;
  }

  .card-body {
    gap: 12px;
  }

  .card-summary {
    font-size: 14px;
    -webkit-line-clamp: 4;
  }

  .card-footer {
    gap: 10px;
  }

  .tag-container {
    gap: 8px;
  }

  .fraud-tag {
    height: 24px;
    padding: 0 10px;
    font-size: 12px;
  }

  .meta-info {
    font-size: 12px;
  }
}

@media screen and (max-width: 1400px) {
  .fraud-card {
    min-width: 320px;
    width: 320px;
    padding: 20px;
  }

  .card-header {
    margin-bottom: 16px;
  }

  .icon-container {
    width: 48px;
    height: 48px;
    margin-right: 12px;
  }

  .card-icon {
    font-size: 24px;
  }

  .card-title {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .card-subtitle {
    font-size: 13px;
  }

  .card-body {
    gap: 10px;
  }

  .card-summary {
    font-size: 13px;
    -webkit-line-clamp: 3;
  }

  .card-footer {
    gap: 8px;
  }

  .tag-container {
    gap: 6px;
  }

  .fraud-tag {
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
  }

  .meta-info {
    font-size: 11px;
  }
}

/* 弹窗样式优化 */
.fraud-detail-dialog {
  .dialog-content-wrapper {
    max-height: 70vh;
    padding-right: 16px;
  }

  .detail-section {
    margin-bottom: 24px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .section-icon {
      font-size: 24px;
      color: #9b2a2a;
      margin-right: 12px;
    }

    .section-title {
      font-size: 18px;
      color: #2c3e50;
    }
  }

  .content-text {
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.8;
    padding: 16px;
    background: #fff;
    border-radius: 4px;
  }

  .case-details {
    padding: 16px;

    .case-meta {
      display: flex;
      gap: 16px;
      margin-bottom: 12px;
      font-size: 12px;
      color: #666;
    }

    .case-description {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .case-suggestion {
      display: flex;
      gap: 12px;
      padding: 12px;
      background: rgba(155,42,42,0.05);
      border-radius: 4px;

      .suggestion-icon {
        font-size: 24px;
        color: #9b2a2a;
      }

      h5 {
        font-size: 14px;
        color: #9b2a2a;
        margin: 0 0 8px 0;
      }

      p {
        font-size: 14px;
        color: #666;
        margin: 0;
      }
    }
  }
}
</style>
